/* 
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */


$(document).ready(function(){
    // extension:
    
    $("html").niceScroll();
        
    $.fn.scrollEnd = function(callback, timeout) {          
      $(this).scroll(function(){
        var $this = $(this);
        if ($this.data('scrollTimeout')) {
          clearTimeout($this.data('scrollTimeout'));
        }
        $this.data('scrollTimeout', setTimeout(callback,timeout));
      });
    };
    
    /*** Opacity Control ***/
    (function ( $ ) {
        $.fn.opacityControl = function() {
            $(this).each(function(){
                var distFromTop = $(this).offset().top - $(window).scrollTop()-100;
                if(distFromTop < 0) distFromTop = -distFromTop;
                var opacity = 1 - (distFromTop/$(window).height());
                if(opacity < 0.1) opacity = 0.1;
                //console.log(opacity);
                $(this).children(".short-desc").css("opacity",opacity);
                $(this).children(".disp-img").children("img").css("opacity",opacity);
            });
        };
    });
    
    $(window).scrollEnd(function(){
        $(".tl-main li").each(function(){
            var distFromTop = $(this).offset().top - $(window).scrollTop()-100;
            if(distFromTop < 0) distFromTop = -distFromTop;
            var opacity = 1 - (distFromTop/$(window).height());
            if(opacity < 0.1) opacity = 0.1;
            //console.log(opacity);
            $(this).children(".short-desc").css("opacity",opacity);
            $(this).children(".disp-img").children("img").css("opacity",opacity);
        });
    });
    
    /*** View Individual Drama ***/
    (function ( $ ) {
        $.fn.viewIndividual = function() {
            var t = $(this).offset().top+40;
            var l = $(this).offset().left+40;
            var w = $(window).width()+100;
            var target = $(this).data("target");
            $(".round-overlay").css({
                "top":t,
                "left":l
            }).animate({
                height: 2 * w,
                width: 2 * w,
                top: - w + t,
                left: - w + l
            },function(){

                $(".tl-main").hide();
                $(".expanded-view").show();
                $(this).fadeOut(function(){
                    $(this).css({
                        "height":0,
                        "width":0,
                        "top":0,
                        "left":0,
                        "display":"block"
                    });
                });

                $(".expanded-item.active").removeClass("active");
                $(target).addClass("active");
                $(".mini-menu a.active").removeClass("active");
                $(".mini-menu a[data-target='"+ target +"']").addClass("active");
                $('.expanded-item-container').css({
                    'margin-top' : - $(target).position().top + $(".expanded-item:first-child").position().top
                });
            });
        };
    }( jQuery ));


    /*** Read More ***/
    (function ( $ ) {
        $.fn.readMore = function() {
            var $text = $(this).prev("p");
            var contentHeight = $text.addClass('auto-height').height();
            $text.removeClass('auto-height').animate({ 
                height: (contentHeight == $text.height() ? 78 : contentHeight)
            }, 500);
            $text.closest(".written-content,.focus-desc").find(".behindsc-wrap p").animate({
                height: (contentHeight == $text.height() ? 78 : contentHeight)-5
            }, 500);
            //contentHeight = contentHeight/2;
            var carousalAnim = -(contentHeight == $text.height() ? 0 : contentHeight)/2;
            console.log(carousalAnim);
            $(this).closest(".carousal").find(".carousal-image-container").animate({marginTop: carousalAnim});
            
            if(contentHeight > 78){
                $('html, body').animate({
                    'scrollTop' : $(this).closest("li").position().top - (contentHeight - 78)
                });
            }else{
                $('html, body').animate({
                    'scrollTop' : $(this).closest("li").position().top + 30
                });
            }
        };
    }( jQuery ));


    /*** Close Target ***/
    (function ( $ ) {
        $.fn.closeTarget = function() {
            $("#"+$(this).data('target')).fadeOut();
            $(".tl-main").fadeIn();

            $('html, body').animate({
                'scrollTop' : $(".mark").position().top - 180
            });

            $("html").getNiceScroll().resize();
        };
    }( jQuery ));


    /*** Expanded View Menu Control ***/
    (function ( $ ) {
        $.fn.menuControl = function() {
            var target = $(this).data('target');
            $(".expanded-item.active").removeClass("active");
            $(target).addClass("active");
            $(".mini-menu a.active").removeClass("active");
            $(this).addClass("active");

            $('.expanded-item-container').animate({
                'marginTop' : - $(target).position().top - 50 + $(".expanded-item:first-child").position().top - 50
            });
        };
    }( jQuery ));

    //$(".expanded-view").bind('mousewheel', function(event) {
    //    if (event.originalEvent.wheelDelta >= 0) {
    //        var currentActiveController = $(".mini-menu a.active");
    //        var target = currentActiveController.prev("a").data('target');

    //        if(target.length){
    //            $(".expanded-item.active").removeClass("active");
    //            $(target).addClass("active");
    //            currentActiveController.removeClass("active");
    //            currentActiveController.prev("a").addClass("active");

    //            $('.expanded-item-container').animate({
    //                'marginTop': -$(target).position().top + $(".expanded-item:first-child").position().top
    //            });
    //        }
    //        return false;
    //    }
    //    else {
    //        var currentActiveController = $(".mini-menu a.active");
    //        var target = currentActiveController.next("a").data('target');

    //        if(target.length){
    //            $(".expanded-item.active").removeClass("active");
    //            $(target).addClass("active");
    //            currentActiveController.removeClass("active");
    //            currentActiveController.next("a").addClass("active");

    //            $('.expanded-item-container').animate({
    //                'marginTop' : - $(target).position().top + $(".expanded-item:first-child").position().top
    //            });
    //        }
    //        return false;
    //    }
    //});


    /*** Carousal ***/
    (function ( $ ) {
        $.fn.carousal = function() {
            return this.each(function() {
                var imageCount = $(this).find(".carousal-image-container").children("img").length;
                $(this).find(".carousal-image-container").width($(".carousal").width()*imageCount+2+"%");
                $(this).find(".carousal-image-container").children("img").width((100/imageCount) + "%");
            });
        };
        $.fn.carousalSlide = function(){
            var currentCarousal = $(this).closest(".carousal");
            var controllerNumber = $(this).index()+1;
            console.log(controllerNumber);
            currentCarousal.find('.carousal-image-container').animate({
                'marginLeft' : - currentCarousal.find(".carousal-image-container img:nth-child("+controllerNumber+")").position().left + currentCarousal.find(".carousal-image-container img:first-child").position().left
            });
            currentCarousal.find(".carousal-controller a.active").removeClass('active');
            currentCarousal.find(".carousal-image-container img.active").removeClass('active');
            currentCarousal.find(".carousal-image-container img:nth-child("+controllerNumber+")").addClass("active");
            $(this).addClass("active");
        };

        $(window).resize(function(){
            $(".expanded-item.active .carousal .carousal-image-container").animate({
                'marginLeft' : - $(".expanded-item.active .carousal").find(".carousal-image-container img.active").position().left + $(".expanded-item.active .carousal").find(".carousal-image-container img:first-child").position().left
            });
        });
    }( jQuery ));


    /*** Detailed View ***/
    (function ( $ ) {
        $.fn.detailView = function() {
            $(".dark-overlay").fadeIn(function(){
                $(".curtain").animate({
                    width: 80+"%"
                },1000,function(){
                    $(".audience").css("width",(506/828 * $(window).height()));
                    $(".audience").fadeIn();
                    $(".dark-overlay").addClass("grey-flood");
                    $(".behind-the-scenes").fadeIn();
                });
            });
        };
        $.fn.backFromDetailView = function() {
            $(".audience").fadeOut();
            $(".dark-overlay").removeClass("grey-flood").fadeOut();
            $(".behind-the-scenes").fadeOut(function(){
                $(".curtain").animate({width: 0},1000);
            });
        };
    }( jQuery ));

    /*** Menu Control ***/
    $(".menu").click(function(){
        $(".dark-overlay").fadeOut();
        $(".curtain").animate({width: 0});
        $(".audience").fadeOut();
        $(".behind-the-scenes").fadeOut();
        $("#expanded-view").fadeOut();
        $(".tl-main").fadeIn();
        $("html").getNiceScroll().resize();

       $("ul.tl-main").addClass("condensed");
       $("ul.tl-main.condensed").animate({
           width: 10+"%"
       });
       $("ul.tl-main.condensed li").animate({
           padding: 20
       });
       $("ul.tl-main.condensed li .disp-img").animate({
           height: 20,
           width: 20,
           marginLeft: -32,
           marginTop: -2
       });
       $("ul.tl-main.condensed li .disp-img img").hide();
       $("ul.tl-main.condensed li .short-desc p").slideUp();
       $("ul.tl-main.condensed li .short-desc .dot-link").fadeOut();
       $("ul.tl-main.condensed li.focus .focus-desc").fadeOut(function(){
           $("ul.tl-main.condensed li.focus").removeClass("focus").addClass("markFocus");
       });
       $("ul.tl-main.condensed li .gen-date").animate({
           marginLeft: -130,
           marginTop: 2
       });
       $("ul.tl-main.condensed li .gen-date .day").hide();
       $("ul.tl-main.condensed li .countdown").hide();
       $("ul.tl-main.condensed").css({"background-color": "transparent"});
       $(this).animate({"marginRight": 0+"%"},function(){
           $(this).addClass("open");
       });
       $('html, body').animate({
           'scrollTop' : $(".mark").position().top - 350
       });
       $(".tl-main li").position();
    });
    $(".menu").mouseleave(function(){
       $(this).removeClass("open");
       $(this).animate({"marginRight": -65+"%"},function(){
            $(this).removeAttr("style");
            $("ul.tl-main.condensed").animate({
                "width": 67+"%"
            });
            $("ul.tl-main.condensed li .disp-img img").show();
            $("ul.tl-main.condensed li .short-desc p").slideDown();
            $("ul.tl-main.condensed li .short-desc .dot-link").fadeIn();

            $("ul.tl-main.condensed li.markFocus").addClass("focus").removeClass("markFocus").children(".focus-desc").fadeIn();
            $("ul.tl-main.condensed").find("*").each(function(){
                $(this).removeAttr("style");
            });
            $("ul.tl-main.condensed").removeAttr("style");

            $("ul.tl-main.condensed").removeClass("condensed");

            $('html, body').animate({
                'scrollTop' : $(".mark").position().top - 180
            });
       });
    });
           
        
});